<template>
  <div class="drag-edit-zone-mobile" :style="scaleConStyles" :class="{ 'display-phone-bg': siteStatus.isVisiblePhone}">
    <div v-if="currentPage" ref="focusDom" class="drag-edit-zone-style" :style="scaleSitePageStyles"
      @keydown.delete.exact="onDeleteComponent"
      @keydown.shift.exact="onKeyDownShift"
      @keyup.shift.exact="onKeyUpShift"
      @keydown.ctrl.c.exact="onCopyComponent"
      @keydown.ctrl.g.exact="onGroupComponent"
      @keydown.ctrl.shift.g.exact="onBreakupComponent"
      @keydown.up.exact="onKeyDownUp"
      @keydown.down.exact="onKeyDownDown"
      @keydown.left.exact="onKeyDownLeft"
      @keydown.right.exact="onKeyDownRight"
      @keydown.ctrl.up.exact="onTopAlign"
      @keydown.ctrl.shift.up.exact="onTopAlign"
      @keydown.ctrl.down.exact="onBottomAlign"
      @keydown.ctrl.shift.down.exact="onBottomAlign"
      @keydown.ctrl.left.exact="onLeftAlign"
      @keydown.ctrl.shift.left.exact="onLeftAlign"
      @keydown.ctrl.right.exact="onRightAlign"
      @keydown.ctrl.shift.right.exact="onRightAlign"
      tabindex="0">
      <div :style="getPageStyles(currentPage)" class="wid-inherit">
        <draggable-generator
          v-for="(item) in currentPage.components"
          :key="item.id"
          :item="item">
        </draggable-generator>
        <div v-if="rightMenu.isVisible" class="right-menu-con" :style="{top: rightMenu.top, left: rightMenu.left}">
          <ul v-if="isGroup && componentData">
            <li v-for="(compData) in componentData.components" :key="'group-' + compData.id" @click="onActiveRightEditMemu(compData)">{{getCompText(compData)}}</li>
          </ul>
          <ul v-else>
            <li @click.self.capture="onGroupComponent">创建组合</li>
            <li @click.self.capture="onBreakupComponent">解散组合</li>
            <li @click.self.capture="onLeftAlign">左对齐</li>
            <li @click.self.capture="onRightAlign">右对齐</li>
            <li @click.self.capture="onHorizontalCenterAlign">水平居中对齐</li>
            <li @click.self.capture="onVerticalCenterDistribute">垂直居中分布</li>
            <li @click.self.capture="onTopAlign">上对齐</li>
            <li @click.self.capture="onBottomAlign">下对齐</li>
            <li @click.self.capture="onDeleteComponent">删除</li>
            <li @click.self.capture="onCopyComponent">复制</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import DraggableGenerator from '@/views/components/draggable-generator.vue'

import { useWebSiteStore } from '@/store/web/site'
import { useWebPageStore } from '@/store/web/page'
import { useWebComponentStore } from '@/store/web/component'

import { bgPositionStyle, getPxOVwByValue, EventBus } from '@/utils/'
import { MOBILE_WID_HEI, COMPONENT_TYPES } from '@/const/'
import { PAGE_TYPE_, ALIGN_TYPE } from '@/const/web/'
import { CoverImg } from '../ts/CoverImg'

const useWebSite = useWebSiteStore()
const useWebPage = useWebPageStore()
const useWebComponent = useWebComponentStore()
const isGroup = () => computed(() => {
  const componentData = useWebComponent.currentComponentData
  return componentData && componentData.components && componentData.components.length > 0 ? true : false
})
const siteStatus = computed(() => {
  return useWebSite.siteStatus
})
const currentPage = computed(() => {
  return useWebPage.currentPage
})
const rightMenu = computed(() => {
  return useWebComponent.rightMenu
})
const componentData = computed(() => {
  return useWebComponent.currentComponentData
})
const scaleConStyles = computed(() => {
  return {
    overflow: useWebSite.siteStatus.isPeripheralVisible ? "visible" : "hidden",
    transform: "scale(" + 1/useWebSite.siteStatus.scale + ")",
  }
})
const scaleSitePageStyles = computed(() => {
  const currentPage: IPage | null = useWebPage.currentPage
  const styles_: any = {}
  const siteAttrs = useWebSite.attrs
  if(siteAttrs.bgUrl) {
    styles_.backgroundImage = 'url(' + siteAttrs.bgUrl + ')'
    bgPositionStyle(styles_, siteAttrs.bgPositionRepeatType)
  } else {
    styles_.backgroundColor = siteAttrs.backgroundColor
  }
  if(currentPage) {
    styles_.height = getPxOVwByValue(currentPage.attrs.height)
    styles_.width = getPxOVwByValue(currentPage.attrs.width)
  }
  styles_.transform = 'scale(' + 1/MOBILE_WID_HEI.designScale + ')'
  return styles_
})
// methods
const getPageStyles = (page: IPage) => {
  const pageStyles_ =  {
    backgroundColor: page.attrs.backgroundColor,
    backgroundImage: 'url()',
    width: getPxOVwByValue(page.attrs.width),
    height: getPxOVwByValue(page.attrs.height),
  }
  if(page.attrs.bgUrl) {
    pageStyles_.backgroundImage = 'url(' + page.attrs.bgUrl + ')'
    bgPositionStyle(pageStyles_, page.attrs.bgPositionRepeatType)
  }
  return pageStyles_
}
const getCompText = (compData: IComponent) => {
  if(compData.cid == COMPONENT_TYPES.wb_img && compData.commonAttr.name) {
    return compData.title + compData.commonAttr.name
  } else {
    return compData.title
  }
}
const onActiveRightEditMemu = (compData: IComponent) => {
  useWebComponent.setActiveComponentId(compData.id)
}
const onTopAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.top)
}
const onBottomAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.bottom)
}
const onLeftAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.left)
}
const onRightAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.right)
}
const onHorizontalCenterAlign = () => {
  useWebSite.alignComponents(ALIGN_TYPE.horizontalCenterAlign)
}
const onVerticalCenterDistribute = () => {
  useWebSite.alignComponents(ALIGN_TYPE.verticalCenterDistribute)
}
const onCancel = (e: any) => {
  // if(e.ctrlKey && e.keyCode == 90 || e.ctrlKey && e.shiftKey && e.keyCode == 90) {
  //   this.cancelComponentAttr()
  // }
  if(e.keyCode == 8 || e.code == 'Backspace') {
    const tag = e.target.tagName.toLowerCase() || e.originalTarget.tagName.toLowerCase()
    if(tag == "textarea" || tag == "input") {
      console.log("textarea input")
    } else {
      e.stopPropagation()
      e.preventDefault()
    }
  }else if(e.keyCode >= 112 && e.keyCode == 123 || e.keyCode == 16 || e.keyCode == 17) {
    e.stopPropagation()
    e.preventDefault()
  }
}
const onKeyDownUp = () => {
  const componentData = useWebComponent.currentComponentData
  const left = _.parseInt(componentData!.conAttr.left)
  const top = _.parseInt(componentData!.conAttr.top - 2)
  useWebComponent.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 })
}
const onKeyDownDown = () => {
  const componentData = useWebComponent.currentComponentData
  const left = _.parseInt(componentData!.conAttr.left)
  const top = _.parseInt(componentData!.conAttr.top + 2)
  useWebComponent.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 })
}
const onKeyDownLeft = () => {
  const componentData = useWebComponent.currentComponentData
  const left = _.parseInt(componentData!.conAttr.left - 2)
  const top = _.parseInt(componentData!.conAttr.top)
  useWebComponent.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 })
}
const onKeyDownRight = () => {
  const componentData = useWebComponent.currentComponentData
  const left = _.parseInt(componentData!.conAttr.left + 2)
  const top = _.parseInt(componentData!.conAttr.top)
  useWebComponent.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 })
}
const onGroupComponent = () => {
  useWebComponent.isGroupCurrentComponent(true)
}
const onBreakupComponent = () => {
  useWebComponent.isGroupCurrentComponent(false)
}
const onCopyComponent = () => {
  useWebComponent.copyCurrentComponent()
}
const onDeleteComponent = () => {
  useWebComponent.removeCurrentComponent()
}
const onKeyDownShift = () => {
  useWebSite.updateKeyDownShift(true)
  useWebSite.updateShiftComponents(true)
}
const onKeyUpShift = () => {
  useWebSite.updateKeyDownShift(false)
  useWebSite.updateShiftComponents(false)
}
const print = () => {
  new CoverImg()
}
const initComp = () => {
  document.addEventListener('keydown', onCancel)
  EventBus.$on("sitethumb", print)
}

initComp()

onMounted(() => {
})

onBeforeUnmount(() => {
  EventBus.$off("sitethumb", print)
  document.removeEventListener('keydown', onCancel)
})

</script>

